<template>
    <div>
        <div class="container">
		<el-container>
			<el-main>
				<div class="form-box" >
					<el-form :label-width="formLabelWidth" :model="attributeDrawerForm" :rules="attributeDrawerFormRules" ref="attributeDrawerFormRef" >
						<el-card class="box-card">
							<el-row>
								<el-col :span="12"><el-form-item label="类目名称">{{ classifyData.classifyName }}</el-form-item></el-col>
								<el-col :span="12"><el-form-item label="类目分类">{{ classifyData.strClassifyColumn }}</el-form-item></el-col>
							</el-row>
							<el-row>
								<el-col :span="12"><el-form-item label="类目等级">{{ classifyData.classifyGrade }}</el-form-item></el-col>
								<el-col :span="12"><el-form-item label="备注">{{ classifyData.remark }}</el-form-item></el-col>
							</el-row>
						</el-card>
						<el-card class="box-card" style="margin-top:15px">
							<el-form-item label="ID" v-if="false">
								<el-input v-model="attributeDrawerForm.id" class="handle-input mr10" :readonly=true></el-input>
							</el-form-item>
							<el-form-item label="所属类目" prop="classifyId">
								<el-input v-model="attributeDrawerForm.classifyId" class="handle-input mr10" readonly v-if="false"/>
								<el-input v-model="classifyData.classifyName" class="handle-input mr10" readonly/>
							</el-form-item>
							<el-form-item label="商品属性名称">
								<el-input v-model="attributeDrawerForm.attrName" class="handle-input mr10" />
							</el-form-item>
							<el-form-item label="数据录入方式">
								<el-input v-model="attributeDrawerForm.inputType" class="handle-input mr10" v-if="false"/>
								<el-input v-model="attributeDrawerForm.strInputType" placeholder="数据录入方式" class="handle-input mr10" readonly clearable @click="vDictDialogVisible = true"/>
							</el-form-item>
							<el-form-item label="展示方式">
								<el-input v-model="attributeDrawerForm.sortType" class="handle-input mr10" v-if="false" />
								<el-select v-model="attributeDrawerForm.sortType" placeholder="请选择">
									<el-option v-for="item in sortTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="排序">
								<el-input-number v-model="attributeDrawerForm.sortKey" :min="1" :max="10" size="small" class="mr10" />
							</el-form-item>
							</el-card>
					</el-form>
				</div>
			</el-main>
			<el-footer>
				<div style="flex: auto">
					<el-button type="primary" @click="func_onSubmit">保存数据</el-button>
					<el-button @click="func_onClose">关闭</el-button>
				</div>
			</el-footer>
		</el-container>
        </div>
        <!-- 引用字典数据插件 -->
        <el-dialog title="数据录入方式" v-model="vDictDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VDict v-bind:selectValue="66" @dictData="func_loadvDictData" />
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter,useRoute } from 'vue-router';
import { findClassifyInfoById, } from '../../../../api/hairmanager/productClassify';
import { findAttributeInfoById, addAttribute, saveAttribute, } from "../../../../api/hairmanager/productAttribute";
import { saveAttributeValue, } from "../../../../api/hairmanager/productAttributeValue";
import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

import VDict from "../../components/dict.vue";
export default {
    name: "attributeDrawerForm",
    components: {VDict},
  	props:{
		selectValue: Object
	},
	emits: ["attributeData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const selectValueId = ref(0);
        const selectValueName = ref("");
        const sortTypeOptions = [
            {
                value: "num",
                label: "数字",
            },
            {
                value: "char",
                label: "文字",
            }
        ];
        const attributeValueTableParam = reactive({
            valueSaveFlg: true,
            selectValueAttrId: 0,
			selectValueName: '',
        });
		// =========================================================================================
        /**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
                id: 0,
                attrName: "",
                classifyId: 0,
                inputType: "",
                sortType: "",
                strInputType: "" ,
                productAttributeValues: [
                {
                    id: 0,
                    attrId: 0,
                    attrValue: "",
                    sort: 0
                }],
                attributesValueOptionId: 0,
                strInputAttributeValue: "",
            }
        };
        /**
         * @name 表单初始化
         */
        const resetattributeDrawerForm = () => {
            Object.assign(attributeDrawerForm, getInitFormData());
        };
        // 分类属性表单数据
        const attributeDrawerForm = reactive(getInitFormData());
        const attributeDrawerFormRef = ref(null);
        // 表单验证规则
        const attributeDrawerFormRules = {
            classifyColumn: [
                { required: true, message: "请选择类目类型", trigger: "blur" },
            ],
            classifyName: [
                { required: true, message: "请输入类目名称", trigger: "blur" },
            ],
        };
		const classifyData = reactive({});
        const func_onload = (v1,v2) => {
            // 读取分类数据
            findClassifyInfoById(v1).then((res) => {
                Object.keys(res.data).forEach(item => {
                    classifyData[item] = res.data[item];
                });
            });
			findAttributeInfoById(v2).then((res) => {
				// 表格内数据初始化到表单里
				Object.keys(res.data).forEach((item) => {
					attributeDrawerForm[item] = res.data[item];
				});
			});
        };
        // 提交
        const func_onSubmit = () => {
            saveAttribute(attributeDrawerForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    drawerEditVisible.value = false;
                    func_getData();
                }
            });
        };
        // 重置
        const func_onClose = () => {
            cex.emit('attributeData', {state: 1, data: []});
            // cex.emit('attributeData', {state: 99, data: []});
        };
        // 引用字典数据插件业务处理========================================================================================= START
        const vDictDialogVisible = ref(false);
        /**
         * @name 字典数据插件引用对话框
         */
        const func_drawerBundDialog = () => {
            vDictDialogVisible.value = true;
        };
        const func_loadvDictData = (v) => {
            attributeDrawerForm.inputType = v.dicCode;
            attributeDrawerForm.strInputType = v.dicName;
            vDictDialogVisible.value = false;
        };
        // 引用字典数据插件业务处理========================================================================================= END
        watch(() => props.selectValue, (val) => {
            if(props.selectValue['load'] === false) {
                resetattributeDrawerForm();
            } else{
            	let classifyId = props.selectValue['classifyId'];
            	selectValueId.value = props.selectValue['selectValueId'];
				selectValueName.value = props.selectValue['classifyName'];
				attributeDrawerForm["classifyId"] = classifyId;
				func_onload(classifyId, selectValueId.value);
			}
        },{deep: true, immediate: true});
        return {
            // 系统变量
            formLabelWidth, selectValueId, selectValueName, sortTypeOptions, classifyData, 
            // 详细数据抽屉参数变量
            attributeDrawerForm, attributeDrawerFormRef, attributeDrawerFormRules, 
            // 详细数据抽屉调用方法
			func_onSubmit, func_onClose,
			// 引用字典数据插件业务处理
			vDictDialogVisible, func_loadvDictData,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 150px;
}

.handle-input {
    width: 150px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>